<template>
	<view>
		<!-- pages/pay/show/index.wxml -->

		<!-- 头部 -->
		<navber id="head-navber" :navbarData="navbarData"></navber>

		<view class="wraper">
			<!-- 商品订单 -->
			<view class="pay">
				<text class="product">支付金额</text>
				<text class="price">{{ orderData.pay_price }}元</text>
			</view>
			<!-- 支付方式 -->
			<view class="payTitle">
				<text>请选择支付方式</text>
			</view>
			<view class="payType">
				<view class="payList" @tap="winxinPay">
					<view class="payImg">
						<image :src="imgUrl + '/imgs/pay/weixin.png'"></image>
					</view>
					<view>微信支付</view>
				</view>

				<view class="payList" @tap="balancePay" v-if="payType != 'recharge' && orderData.userbalance > 0">
					<view class="payImg">
						<image :src="imgUrl + '/imgs/pay/balance.png'"></image>
					</view>
					<view>余额支付 ({{ orderData.userbalance }}元)</view>
				</view>
				<view class="payList" @click="beanPay"
					v-if="bean == 'bean' && orderData.userbean > 0&&orderData.userbean>=orderData.pay_price">
					<view class="payImg">
						<image :src="imgUrl + '/imgs/pay/balance.png'"></image>
					</view>
					<view>趣豆兑换 ({{ orderData.userbean }}个)</view>
				</view>
			</view>
			<!-- 密码输入框 -->
			<view v-if="showPayPwdInput">
				<view class="bg_layer" @tap.stop.prevent="outFocus"></view>
				<view class="input_main">
					<view class="input_title">
						<view class="input_back" @tap.stop.prevent="hidePayLayer"><text></text></view>
						<text>输入支付密码</text>
					</view>
					<view class="input_tip"><text>使用会员卡余额支付需要验证身份，验证通过后才可进行支付。</text></view>
					<view class="input_row" @tap.stop.prevent="getFocus">
						<view class="pwd_item" v-for="(item, i) in 6" :key="i">
							<text v-if="pwdVal.length > i"></text>
						</view>
					</view>
					<view class="forget_pwd" @tap.stop.prevent="hidePayLayer">忘记密码</view>
					<input class="input_control" password type="number" :focus="payFocus" @input="inputPwd"
						maxlength="6" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navber from '@/components/navber/index';
	// pages/pay/show/index.js
	const Config = require('../../../config/index.js');
	const app = getApp();
	const Api = require('../../../api/index.js');

	export default {
		components: {
			navber
		},
		data() {
			return {
				navbarData: {
					title: '收银台' //顶部标题
				},

				//导航栏
				imgUrl: Config.imgUrl,

				//图片url
				orderId: '',

				//订单id
				vipId: '',

				//vip id
				payPrice: '',
				bean: "",
				//充值金额
				payType: '',

				//类型
				orderData: [],

				showPayPwdInput: false,

				//是否展示密码输入层
				pwdVal: '',

				//输入的密码
				//文本框焦点
				payFocus: true,
				openid: "",
				i: ''
			};
		},
		onLoad(e) {
			if (e.order_id) {
				e.order_id = e.order_id;
			} else {
				e.order_id = 0;
			} //普通订单或用户代理商订单id

			if (e.vip_id) {
				e.vip_id = e.vip_id;
			} else {
				e.vip_id = 0;
			}

			if (e.pay_price) {
				e.pay_price = e.pay_price;
			} else {
				e.pay_price = 0;
			}
			if (e.bean) {
				e.bean = e.bean;
			} else {
				e.bean = 0;
			}
			this.setData({
				orderId: e.order_id,
				payType: e.pay_type,
				vipId: e.vip_id,
				payPrice: e.pay_price,
				bean: e.bean
			}); // console.log(this.data);

			this.getData();
		},
		onPullDownRefresh(e) {
			this.getData();
			uni.stopPullDownRefresh();
		},
		methods: {
			getData() {
				//获取订单数据
				var json = {
					order_id: this.orderId,
					pay_type: this.payType,
					vip_id: this.vipId,
					pay_price: this.payPrice
				};
				Api.payOrderShow(json).then((res) => {
					if (res.code == 1) {
						this.setData({
							orderData: res.data
						});
					} // wx.stopPullDownRefresh();
				});
			},
			getSessionKey() {
				var _this = this;
				uni.login({
					success(res) {
						var data = {
							code: res.code,
							appid: app.globalData.appid,
							type: 'every' //one一次 every每次
						};
						Api.getSessionKey(data).then((res) => {
							if (res.code == 1) {
								var data = res.data;
								if (data.openid != '') {
									_this.setData({
										openid: data.openid
									});
									_this.payWxGet();
								}
							}
						});
					}
				});
			},
			winxinPay(e, _dataset) {
				if (this.openid == "") {
					var that = this;
					uni.getUserProfile({
						desc: '用于支付账号绑定',
						// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							// console.log(res);
							that.getSessionKey();
						}
					});
					return;
				}
				this.payWxGet();
			},
			payWxGet() {
				let that = this;
				//微信支付
				var json = {
					pay_sn: this.orderData.pay_sn,
					pay_type: this.payType,
					pay_mode: 'weixin',
					openid: this.openid
				};
				Api.payConfirm(json).then((res) => {
					if (res.code == 1) {
						const pay_sn = res.data.wxPayData.pay_sn;
						const price = res.data.wxPayData.pay_price;
						uni.requestPayment({
							timeStamp: res.data.wxPayInfo.timeStamp,
							nonceStr: res.data.wxPayInfo.nonceStr,
							package: res.data.wxPayInfo.package,
							signType: res.data.wxPayInfo.signType,
							paySign: res.data.wxPayInfo.paySign,

							success(res) {
								if (that.bean == '') {
									uni.redirectTo({
										url: '/pages/user/order/index?goods_type=' + that
											.goods_type
									});
								} else {
									uni.redirectTo({
										url: '/pages/user/order/index'
									});
								}

							},

							fail(res) {
								uni.showToast({
									title: '未支付',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			balancePay(e, _dataset) {
				let that = this;
				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				// this.showInputLayer();
				//余额支付
				var json = {
					pay_sn: this.orderData.pay_sn,
					pay_type: this.payType,
					pay_mode: 'balance'
				};
				Api.payConfirm(json).then((res) => {
					if (res.code == 1) {
						if (that.bean == '') {
							uni.redirectTo({
								url: '/pages/pay/res/index?pay_mode=weixin&goods_type=2'
							});
						} else {
							uni.redirectTo({
								url: '/pages/pay/res/index?pay_mode=weixin'
							});
						}
					}
				});
			},
			beanPay() {
				let that = this;
				//趣豆兑换
				var json = {
					pay_sn: this.orderData.pay_sn,
					pay_type: this.payType,
					pay_mode: 'bean'
				};
				Api.payConfirm(json).then((res) => {
					if (res.code == 1) {
						if (that.bean == '') {
							uni.redirectTo({
								url: '/pages/pay/res/index?pay_mode=weixin&goods_type=2'
							});
						} else {
							uni.redirectTo({
								url: '/pages/pay/res/index?pay_mode=weixin'
							});
						}
					}
				});
			},
			showInputLayer: function() {
				this.setData({
					showPayPwdInput: true,
					payFocus: true
				});
			},

			/**
			 * 隐藏支付密码输入层
			 */
			hidePayLayer: function(e, _dataset) {
				let that = this;
				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				var val = this.pwdVal;
				this.setData({
						showPayPwdInput: false,
						payFocus: false,
						pwdVal: ''
					},
					function() {
						if (val == '') {
							return;
						} //余额支付

						var json = {
							password: val,
							pay_sn: this.orderData.pay_sn,
							pay_type: 'pay',
							pay_mode: 'balance'
						};
						Api.payConfirm(json).then((res) => {
							if (res.code == 1) {
								if (that.bean == '') {
									uni.redirectTo({
										url: '/pages/pay/res/index?pay_mode=weixin&goods_type=2'
									});
								} else {
									uni.redirectTo({
										url: '/pages/pay/res/index?pay_mode=weixin'
									});
								}
							}
						});
					}
				);
			},

			/**
			 * 获取焦点
			 */
			getFocus: function(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				this.setData({
					payFocus: true
				});
				this.showInputLayer();
			},

			outFocus: function(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				this.setData({
					payFocus: false
				});
				this.hidePayLayer();
			},

			/**
			 * 输入密码监听
			 */
			inputPwd: function(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				this.setData({
					pwdVal: e.detail.value
				});

				if (e.detail.value.length >= 6) {
					this.hidePayLayer();
				}
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
